<template>
	<view class="center">
		<view class="logo" @click="goLogin" :hover-class="!hasLogin ? 'logo-hover':'none'">
			<image class="logo-img" :src="hasLogin ? userInfo.avatarUrl :avatarUrl"></image>
			<view class="logo-title">
				<view class="uni-column">
					<text class="user-name">{{hasLogin ? userInfo.name:'Hi，您未登录'}}</text>
					<text class="user-type">{{hasLogin ? userInfo.type:'职位'}}</text>
				</view>
				<text class="go-edit edit" @click="goProfile" v-if="hasLogin">&#xe63b;</text>
			</view>
		</view>
		
		<view class="center-list">
			<view class="center-list-item item-border-top" @click="goCard" v-if="userInfo.typeId != '1'">
				<text class="list-icon" >&#xe6a8;</text>
				<text class="list-text uni-list-cell-navigate uni-navigate-right">我的名片</text>
			</view>
			<view class="center-list-item item-border-top item-border-bottom" @click="goCollect">
				<text class="list-icon" >&#xe628;</text>
				<text class="list-text uni-list-cell-navigate uni-navigate-right">我的收藏</text>
			</view>
			<view class="center-list-item item-border-bottom" @click="goApply" v-if="userInfo.typeId == '1' || userInfo.typeId == '4' || userInfo.typeId == '5'">
				<text class="list-icon">&#xe657;</text>
				<text class="list-text uni-list-cell-navigate uni-navigate-right">申请成为服务商</text>
			</view>
			<view class="center-list-item  item-border-bottom" @click="goData" v-if="userInfo.typeId != '1' ">
				<text class="list-icon" >&#xe715;</text>
				<text class="list-text uni-list-cell-navigate uni-navigate-right">数据雷达</text>
			</view>
		</view>
		
		<view class="center-list">
			<view class="center-list-item item-border-top item-border-bottom item-border-top" @click="goCustomerService">
				<text class="list-icon" >&#xe602;</text>
				<text class="list-text uni-list-cell-navigate uni-navigate-right">联系客服</text>
			</view>
			<view class="center-list-item  item-border-bottom" @click="goAbout">
				<text class="list-icon" >&#xe601;</text>
				<text class="list-text uni-list-cell-navigate uni-navigate-right">关于澳乐居</text>
			</view>
		</view>
		
	</view>
	
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	
	export default {
		
		data() {
			return {
				avatarUrl:'/static/avatar.png',
				userInfo:{
					avatarUrl:'/static/avatar.png',
					name:'',
					type:'',
					typeId:1,
					userId:'',
				}
			}
		},
		onLoad() {
			if(this.hasLogin){
				this.getUserInfo();
			}
		},
		
		computed: {  
            ...mapState(['forcedLogin', 'hasLogin', 'token','usertype'])  
        },  
        methods: {  
            ...mapMutations(['logout']),
			goLogin(){
				if(!this.hasLogin){
					uni.navigateTo({
						url:'/pages/tabBar/account/wechatlogin'
					})
				}else{
					uni.navigateTo({
						url:'profile'
					})
				}
			},
			goProfile(){
				if (!this.hasLogin) {
					uni.navigateTo({
						url:'/pages/tabBar/account/wechatlogin'
					})
				} else{
					uni.navigateTo({
						url:'profile'
					})
				}
			},
			goCard(){
				
			},
			goCollect(){
				if (!this.hasLogin) {
					uni.navigateTo({
						url:'/pages/tabBar/account/wechatlogin'
					})
				} else{
					uni.navigateTo({
						url:''
					})
				}
			},
			goApply(){
				if (!this.hasLogin) {
					uni.navigateTo({
						url:'/pages/tabBar/account/wechatlogin'
					})
				} else{
					uni.navigateTo({
						url:''
					})
				}
			},
			goData(){
				
			},
			goCustomerService(){
				
			},
			goAbout(){
				uni.navigateTo({
					url:'about'
				})
			},
			//获取个人信息数据
			getUserInfo(){
				let that = this;
				let url = that.global_url + '/login/getUserInfo?token=' + that.token;
				uni.request({
					url:url,
					method:"POST",
					header:{'content-type':'application/json'},
					data:'',
					success: (res) => {
						console.log("res: " + JSON.stringify(res.data));
						if(res.data.status == 200){
							that.userInfo.avatarUrl = res.data.info.avatar;
							that.userInfo.name = res.data.info.nickname;
							that.userInfo.typeId = !res.data.info.type  ? 1 : res.data.info.type
							that.userInfo.userId = res.data.info.userId
							that.userInfo.type = that.setType(res.data.info.type);
							uni.setStorageSync('usertype', res.data.info.type);
							console.log("usertypeId:"+that.userInfo.typeId)
						}
					}
				})
			},
			setType(type){
				switch (type){
					case '1':
						return '普通用户'
					break;
					case '2':
						return '服务商Admin'
					break;
					case '3':
						return '服务商'
					break;
					case '4':
						return '房产销售'
					break;
					case '5':
						return '房产中介Admin'
						break;
					case '6':
						return '澳乐居Admin'
					break;
					default:
						return '普通用户'
					break;
				}
			}
			
        }
		
		
		
	}
	
</script>

<style>
	
	page,
	view {
		display: flex;
	}
	
	page {
		background-color: #FAFCFC;
		font-family: iconfont;
	
	}
	
	.center {
		/* display: flex; */
		flex-direction: column;
	}
	
	.logo {
		width: 750rpx;
		height: 240upx;
		padding: 40upx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		flex-direction: row;
		align-items: center;
	}
	.logo-img {
		width: 140upx;
		height: 140upx;
		border-radius: 100%;
	}
	
	.logo-title{
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		height: 150rpx;
		flex: 1;
		margin-left: 40rpx;
	}
	
	.user-name {
		height: 60upx;
		line-height: 60upx;
		font-size: 34upx;
		color: #636363;
	}
	.user-type {
		height: 40upx;
		line-height: 40upx;
		font-size: 28upx;
		color: #A5A5A5;
	}
	.go-edit.edit {
		font-size: 46upx;
		color: #1177DB;
		margin-right: 30upx;
	}
	/* list */
	.center-list{
		flex-direction: column;
		margin-top: 20rpx;
		background-color: #FFFFFF;
	}
	.center-list-item{
		flex-direction: row;
		align-items: center;
		
	}
	.item-border-top{
		border-top: 1rpx solid #F0F0F0;
	}
	.item-border-bottom{
		border-bottom: 1rpx solid #F0F0F0;
	}
	
	.list-icon{
		margin-left: 30rpx;
		color: #1177DB;
	}
	.list-text{
		font-size: 28rpx;
		color: #636363;
		/* background-color: #007AFF; */
	}
</style>
